<template>
  <div class="cartcontrol">
      <transition name="move">
        <div class="cart-decrease" @click="decreaseCart()" v-show="food.count > 0">
            <span class="inner icon-remove_circle_outline"></span>
        </div>
      </transition>
      <div class="cart-count" v-show="food.count > 0">{{food.count}}</div>
      <div class="cart-add icon-add_circle" @click="addCart($event)"></div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
    props: {
        food: {
            type: Object
        }
    },
    methods: {
        addCart(event) {
            if (!event._constructed) {
                return
            }
            if (!this.food.count) {
                Vue.set(this.food, 'count', 1)
            } else {
                this.food.count++
            }
            this.$emit('cart-add', event.target)
            // 添加这句，提交'cart-add'事件给父组件，第二个是要传递的参数
        },
        decreaseCart() {
            if (!event._constructed) {
                return
            }
            if (this.food.count) {
                this.food.count--
            }
        }
    }
}
</script>

<style lang='stylus' scoped>
    .cartcontrol
        font-size: 0
        .move-enter-active,.move-leave-active
            transition: all 0.4s linear;
            opacity: 1
            transform: translate3d(0,0,0)
            .inner
                transition: all 0.4s linear
                transform: rotate(0)
        .move-enter,.move-leave-to
            opacity: 0
            transform: translate3d(24px,0,0)
            .inner
                transform: rotate(180deg)
        .cart-decrease
            display: inline-block
            padding: 6px
            .inner
                display: inline-block
                line-height: 24px
                font-size: 24px
                color: rgb(0,160,220)
        .cart-count
            display: inline-block
            vertical-align: top
            padding-top: 6px
            width: 12px
            line-height: 24px
            text-align: center
            font-size: 10px
            color: rgb(147,153,159)
        .cart-add
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: 24px
            color: rgb(0,160,220)
</style>
